<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>实训五 拓展一 div+css设计页面</title>
		<style type="text/css">
			body {
				font-weight: bolder;
				font-size: 16px;
				padding: 0 auto;
				margin: 0 auto;
			}
			#container {
				width: 100%;
				padding: 0 auto;
				margin: 0 auto;
			}
			#header {
				width: 100%;
				height: 70px;
				background: #9f6 url(../img/w3school.png) no-repeat left top;
				/* left top 表示居左上角 
            也可以使用 background-position: left top;代替*/
			}
			img {
				height: 70px;
			}
			#nav {
				width: 100%;
				height: 32px;
				background-color: #fbfbfb;
			}
			#nav ul {
				list-style-type: none;
				text-align: center;
                line-height: 32px;
			}
			#nav ul li {
				padding: 5px 15px;
				display: inline;
			}
			#mainbody {
				width: 100%;
				height: 400px;
				padding: 0 auto;
				margin: 0 auto;
			}
			#left {
				float: left;
				background-color: #efefef;
				width: 15%;
				height: 480px;
			}
			#left ul,
			#right ul {
				list-style-type: none;
				margin: 20px;
			}
			#middle {
				width: 70%;
				margin: 0 15%;
				height: 480px;
				text-indent: 2em;
			}
			#right {
				float: right;
				background-color: #efefef;
				width: 15%;
				height: 480px;
			}
			#footer {
				width: 100%;
				height: 70px;
				background-color: #b6b6b6;
				text-align: center;
				padding: 10px;
			}
			.clearfloat {
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="header"><img src="../img/w3school.png" alt="" /></div>
			<div id="nav">
				<ul>
					<li><a href="#">HTML/CSS</a></li>
					<li><a href="#">JavaScript</a></li>
					<li><a href="#">Server Side</a></li>
					<li><a href="#">ASP.NET、XML</a></li>
					<li><a href="#">Web Services</a></li>
					<li><a href="#">Web</a></li>
				</ul>
			</div>
			<div id="mainbody">
				<div id="left">
					<ul>
						<li><a href="#">HTML</a></li>
						<li><a href="#">XHTML</a></li>
						<li><a href="#">HTML 5</a></li>
						<li><a href="#">CSS</a></li>
						<li><a href="#">CSS 3</a></li>
						<li><a href="#">TCP/IP</a></li>
					</ul>
				</div>
				<div id="right">
					<ul>
						参考手册
						<li><a href="#">HTML/HTML5</a></li>
						<li><a href="#">标签</a></li>
						<li><a href="#">CSS</a></li>
						<li><a href="#">1,2,3</a></li>
						<li><a href="#">HTML颜色</a></li>
						<li><a href="#">HTML</a></li>
						<li><a href="#">ASCII</a></li>
						<li><a href="#">HTML</a></li>
						<li><a href="#">Latin-1</a></li>
					</ul>
				</div>
				<div id="middle">
					<p>HTML 系列教程</p>
					<p>从左侧的菜单选择你需要的教程！</p>
					<hr />
					<p>HTML</p>
					<p>HTML 指超文本标签语言。</p>
					<p>HTML 是通向 WEB技术世界的钥匙。</p>
					<p>
						在 W3School 的 HTML教程中，您将学习如何使用 HTML
						来创建站点。
					</p>
					<p>HTML非常容易学习！你会喜欢它的！现在开始学习 HTML ！</p>
					<hr />
					<p>HTML 5</p>
					<p>HTML 5 是下一代的 HTML。</p>
					<p>
						HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5
						支持。
					</p>
					<p>
						在 W3School 的 HTML 5 教程中，您将了解HTML5 中的新特性。
					</p>
					<p>现在就开始学习 HTML 5 ！</p>
				</div>
			</div>
			<div class="clearfloat"></div>
			<div id="footer">
                <p>当你使用本网站的时候，代表您已经接受了本站的<a href="#">使用条款</a>和<a href="#">隐私条款</a> 。版权所有，保留一切权利</p>
                <p>赞助商：<a href="#">上海赢科投资有限公司。蒙ICP备06004630号</a> </p>
            </div>
		</div>
	</body>
</html>
